<!--
    *名称：头部搜索条件组件
    *功能：methods
      1.点击搜索的方法：@search
      2.搜索条件 props : formItemList
-->

<template>
  <div class="dialog-search">
    <el-form :inline="true" ref="ruleForm" :model="formInline" class="demo-form-inline" label-width="80px">
      <el-form-item v-for="(item, index) in props.formItemList" :key="index" :label="item.label">
        <el-select v-if="item.type === 'select'" v-model="formInline[item.param as keyof typeof item]" placeholder="请选择" class="baseIpt"
          :clearable="true">
          <el-option v-for="(item2, index2) in item.selectOptions" :key="index2" :label="item2.name"
            :value="item2.code"></el-option>
        </el-select>
        <el-input v-if="item.type === 'input'" v-model="formInline[item.param as keyof typeof item]" placeholder="请输入" class="baseIpt" />
        <el-date-picker
          v-if="item.type === 'rangeDate'"
          v-model="formInline[item.param as keyof typeof item]"
          type="daterange"
          :range-separator="$t('common.to')"
          :start-placeholder="$t('common.startTime')"
          :end-placeholder="$t('common.endTime')"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
        <el-input
        v-if="item.type === 'phone'"
          v-model="formInline[item.param as keyof typeof item]"
          placeholder="Please input"
          class="baseIpt"
        >
          <template #prepend>
            <el-select v-model="formInline[item.reserve as keyof typeof item]" placeholder="Select" style="width: 55px">
              <el-option label="Restaurant" value="1" />
              <el-option label="Order No." value="2" />
              <el-option label="Tel" value="3" />
            </el-select>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <div class="operate">
      <el-button type="primary" @click="onSubmit">查詢</el-button>
      <el-button type="primary" @click="resetForm(ruleForm)">重置</el-button>
      <!-- 可用于显示其他按钮 -->
      <slot name="btn"></slot>
    </div>
    <!-- <el-form-item>
      <el-button type="" @click="resetForm(ruleForm)">重置</el-button>
    </el-form-item> -->
  </div>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus'
const ruleForm = ref<FormInstance>()
interface selectVo {
  name: string,
  code: string
}
interface formItem {
  label?: string,
  type: string,
  selectOptions?: Array<selectVo>,
  param: string,
  defaultSelect?: string,
  reserve?: string // 备用值：如需要两个值拼接时使用
}
interface NObject {
  [key: string]: string
}
const props = defineProps({
  emitSearch: { // 是否立即执行搜索
    type: Boolean,
    default: false
  },
  formItemList: {
    type: Array as () => Array<formItem>,
    default: () => [
      {
        label: '下拉框',
        type: 'select',
        param: 'company',
        selectOptions: [{ name: '111', code: '111' }],
        defaultSelect: '222' // 下拉框默认选中项
      },
      {
        label: '输入框',
        type: 'input',
        param: 'name'
      }
    ]
  }
})
const formInline = ref<NObject>({})
const emit = defineEmits(['search'])
watch(() => props.emitSearch, (newVal) => {
  if (newVal) {
    console.log('此时触发--立即执行搜索')
    emit('search', formInline.value)
  }
})
watch(props.formItemList, (newVal) => {
  for (const obj of newVal) {
    if (obj.defaultSelect) {
      formInline.value[obj.param] = obj.defaultSelect
    }
    if (obj.reserve) {
      // formInline.value[obj.param] =
    }
  }
}, { immediate: true }
)
const formList = ref<formItem[]>([])
onMounted(() => {
  // formList.value = props.formItemList
  // props.formItemList.forEach(item => {
  //   if (item.reserve !== undefined) {
  //     formInline.value[item.param] = ['', '']
  //   }
  // })
})
const onSubmit = () => {
  console.log('submit!', formInline.value)
  emit('search', formInline.value)
}
const resetForm = (formName: FormInstance | undefined) => {
  if (!formName) return
  formName.resetFields()
  const temp = ref<NObject>({})
  for (const obj of props.formItemList) {
    // formInline[obj.param] = obj.defaultSelect || "";  // 重置时下拉框的默认值如果要保留就选用这个
    temp.value[obj.param] = '' // 所有筛选条件清空
  }
  formInline.value = temp.value
  emit('search', formInline.value)
}
</script>

<style lang="scss" scoped>
.dialog-search {
  padding: 20px 0;
  text-align: left;

  .baseIpt {
    width: $input-width;
    background: #FFFFFF;
    border-radius: 7px;
    // margin-right: 20px;
    // border: 1px solid #D8D8D8;
  }
  :deep(.el-date-editor.el-input__wrapper){
    width: $input-width !important;
    box-sizing: border-box;
  }
  // :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper){
  //   width: calc($input-width - 20px) !important;
  // }
  // :deep(.el-input__wrapper){
  //   width: 100% !important;
  // }
  .operate {
    display: flex;
    align-items: center;

    .el-button {
      margin-right: 40px;
      margin-left: 0 !important;
      // background-color: #3052F6;
    }
  }
}
</style>
